<template>
  <div class="pingTai">
    <div class="ptHeader">
      <label for="">名称</label>
      <input type="text" v-model="Name">

      <label for="">测项</label>
      <select v-model="CeXiang">
         <option selected>请选择</option>
         <option>GNSS</option>
         <option>振动</option>
         <option>其它</option>
      </select>

      <label for="">设备状态</label>
      <select v-model="Begin">
         <option selected>请选择</option>
         <option>在线</option>
         <option>离线</option>
      </select>

      <label for="">所属项目</label>
      <select v-model="XiangMu">
         <option>河南四维远见试点项目</option>
         <option selected>请选择</option>
      </select>

      <button class="btn1" @click="find">查询</button>
      <button class="btn2" @click="clear">重置</button>
    </div>
    <div class="cdtb" id="cdTb">
      <div class="main">
        <div class="tbT">
          <div class="tbt">
            <div class="tbt1"></div>
            <div class="tbt1"></div>
            <div class="tbt1"></div>
            <div class="tbt1"></div>
          </div>
        </div>
        <div class="table">
          <div class="thead">
            <div class="tr">
              <div class="th">编号</div>
              <div class="th">名称</div>
              <div class="th">imei号码</div>
              <div class="th">最新上线时间</div>
              <div class="th">物联网卡号</div>
              <div class="th">开机时间</div>
              <div class="th">开机状态</div>
              <div class="th">软件版本</div>
              <div class="th">外部电压</div>
              <div class="th">内部电压</div>
              <div class="th">开机次数</div>
              <div class="th">信号强度</div>
            </div>
          </div>
          <div class="tbody" v-if="filteredlist.length > 0">
            <div v-for="(item , index) in filteredlist" :key="item.id" class="tr" :class="{ active: item.isChecked }">
              <div class="td">{{ index + 1 }}</div>
              <div class="td">{{ item.name }}</div>
              <div class="td">{{ item.imei }}</div>
              <div class="td">{{ item.time }}</div>
              <div class="td">{{ item.idhao }}</div>
              <div class="td">{{ item.begintime }}</div>
              <div class="td">{{ item.begin }}</div>
              <div class="td">{{ item.version }}</div>
              <div class="td">{{ item.outV }}</div>
              <div class="td">{{ item.inV }}</div>
              <div class="td">{{ item.num }}</div>
              <div class="td">{{ item.intensity }}</div>
            </div>
            <div class="bottom">
              <a href="">《</a><em>1</em><a href="">》</a>
              <span>
                到第<input type="text" class="bottomInput">页<button class="tzbtn">确定</button>共1条
                <select class="bottomSelect">
              <option>10条/页</option>
              <option>20条/页</option>
              <option>30条/页</option>
              <option>40条/页</option>
              <option>50条/页</option>
              <option>60条/页</option>
              <option>70条/页</option>
              <option>80条/页</option>
              <option selected>90条/页</option>
              </select>
              </span>

            </div>

          </div>
          <div class="empty" v-else><div class="empty-">无数据</div></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
  return {
    list: [
      {
        name: "1",
        imei: "1",
        time: "1",
        idhao: "1",
        begintime: "1",
        begin: "1",
        version: "1",
        outV: "1",
        inV: "1",
        num: 1,
        intensity: "1",
        ceXiang: "1",
        xiangMu: "1"
       },
       {
        name: "2",
        imei: "2",
        time: "2",
        idhao: "2",
        begintime: "2",
        begin: "2",
        version: "2",
        outV: "2",
        inV: "2",
        num: 2,
        intensity: "2",
        ceXiang: "2",
        xiangMu: "2"
       },
       {
        name: "3",
        imei: "3",
        time: "3",
        idhao: "3",
        begintime: "3",
        begin: "3",
        version: "3",
        outV: "3",
        inV: "3",
        num: 3,
        intensity: "3",
        ceXiang: "3",
        xiangMu: "3"
       },
       {
        name: "2",
        imei: "2",
        time: "2",
        idhao: "2",
        begintime: "2",
        begin: "2",
        version: "2",
        outV: "2",
        inV: "2",
        num: 2,
        intensity: "2",
        ceXiang: "2",
        xiangMu: "2"
       }
    ],
    Name: "",
    CeXiang: "请选择",
    Begin: "请选择",
    XiangMu: "请选择"
  }
},
computed: {
  filteredlist() {
    if (!this.Name && this.CeXiang === "请选择" && this.Begin === "请选择" && this.XiangMu === "请选择") {
      return this.list
     } else {
      let filtered = []
      if (this.Name) {
        const NameString = this.Name.toString()
        filtered = this.list.filter(item => { return item.name.toString().includes(NameString) })
      }
      if (this.CeXiang !== "请选择") {
        const CeXiangString = this.CeXiang.toString()
        filtered = this.list.filter(item => { return item.ceXiang.toString().includes(CeXiangString) })
      }
      if (this.Begin !== "请选择") {
        const BeginString = this.Begin.toString()
        filtered = this.list.filter(item => { return item.begin.toString().includes(BeginString) })

      }
      if (this.XiangMu !== "请选择") {
        const XiangMuString = this.XiangMu.toString()
        filtered = this.list.filter(item => { return item.xiangMu.toString().includes(XiangMuString) })

      }
      return filtered

     }
  }
  },
  methods: {
    clear() {
      this.Name = ""
      this.CeXiang = "请选择"
      this.Begin = "请选择"
      this.XiangMu = "请选择"
    }

  }
}
</script>

<style scoped>
.pingTai{
  top: 8.3vh;
  position:absolute;
  width: 100vw;
  height: 91.5vh;
  z-index: 100;
  background: url(/img/jiemian/bg.jpg);
  background-repeat: no-repeat;
  background-position: 0 -8.3vh;
  opacity: 0.9;
  font-size: 0.8vw;
  color: black;
}
.ptHeader{
  display: flex;
  align-items: center;
  position:absolute;
  margin: 0.52vw;
  z-index: 1000;
  width: 98.958vw;
  height: 8.25vh;
}
label{
  margin-left: 2.5vh;
  width: 5.73vw;
  height: 4.02vh;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 0.78vw;
  font-size: 0.8vw;
  color: #FFFFFF;
}
.btn1{
  margin-left: 1.6vw;
  width: 3.2vw;
  height: 3.6vh;
  padding: 0 0.52vw;
  border-radius: 0.3vw;
  font-size: 0.7vw;
}
.btn2{
  margin-left: 0.8vw;
  width: 3.2vw;
  height: 3.6vh;
  padding: 0 0.52vw;
  border-radius: 0.3vw;
  font-size: 0.7vw;
}
.cdtb{
  margin-top: 10.33vh;
  margin-left: 1vw;
  margin-right: 1vw;
  width: 98vw;
  height: 83.25vh;
}
.tbT{
  display: flex;
  align-items: center;
  width: 100%;
  height: 5.3vh;
}
.tbt{
  display: flex;
  width: 8.4vw;
  height: 3.32vh;
  margin-left: 88vw;
}
.tbt1{
  width: 1.634vw;
  height: 3.32vh;
  background-color: #4a08e4;
  margin-left: 0.466vw;
}
.table{
  text-align: left;
  border-width: 1px;
  border-style: solid;
  border-color: #FFFFFF;
}
.th{
  width: 8vw;
  height: 3.6vh;
  margin: 0.53vh 0;
  color: #FFFFFF;
  font-size: 0.8vw;
  text-align: center;
}
.td{
  width: 8vw;
  height: 3.6vh;
  margin: 0.53vh 0;
  color: #FFFFFF;
  font-size: 0.8vw;
  text-align: center;
}
.tr{
  display: flex;
}
.glbtn{
  font-size: 0.8vw;
  background-color: #0fcce6;
}
.bottom{
  display: flex;
  align-items: center;
  width: 100%;
  height: 4.76vh;
  text-align: center;
}
a{
  width: 2.08vw;
  height: 2.75vh;
  font-size: 0.8vw;
  background-color: #066785;
}
em{
  width: 1.56vw;
  height: 2.75vh;
  font-size: 0.8vw;
  color: #FFFFFF;
}
span{
  width: 18vw;
  height: 2.75vh;
  font-size: 0.8vw;
  color: #FFFFFF;
}
.bottomInput{
  width: 2.08vw;
  height: 2.75vh;
  margin: 0 0.52vw;
  font-size: 0.8vw;
}
.tzbtn{
  width: 2.08vw;
  height: 2.75vh;
  margin-left: 0.52vw;
  margin-right: 1vw;
  font-size: 0.8vw;
  color: #000;
}
.bottomSelect{
  width: 3.9vw;
  height: 2.75vh;
  margin: 0 0.52vw;
  font-size: 0.8vw;
  color: #000;
}
.empty{
  width: 100%;
  height: 25vh;
}
.empty-{
  margin-top: 12.5vh;
  color: #999999;
  text-align: center;
}
</style>
